<template>
  <Dialog
    title="审核拒绝"
    :width="600"
    :visible.sync="propVisible"
    @close="hanldeClose"
  >
    <el-form class="u-pt10 u-pl20 u-pr20">
      <el-form-item class="u-mb10">
        <el-checkbox-group
          class="el-checkbox-group--row"
          v-model="checkList"
        >
          <el-checkbox
            v-for="(item, index) in propList"
            :label="item"
            :key="index"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-input
          type="textarea"
          autosize
          v-model="remark"
        ></el-input>
      </el-form-item>
      <el-form-item align="center">
        <el-button
          type="primary"
          size="small"
          @click="hanldeConfirm"
        >确 定</el-button>
        <el-button
          class="u-ml20"
          size="small"
          @click="hanldeClose"
        >取 消</el-button>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog";

export default {
  name: "DialogAuditReject",
  components: {
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      propVisible: this.visible,
      propList: this.list,
      checkList: [],
      remark: ""
    };
  },
  watch: {
    visible(v) {
      this.propVisible = v;
    },
    list(v) {
      this.propList = v;
    }
  },
  methods: {
    hanldeConfirm() {
      let reject = this.remark ? this.checkList.concat(this.remark) : this.checkList;
      this.$emit("confirm", reject);
    },
    hanldeClose() {
      this.propVisible = false;
      this.$emit("update:visible", false);
    }
  }
};
</script>